<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../../src/css/layui.css">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>

<body>

  <div style="padding: 15px; ">
    <form class="layui-form" action="" lay-filter="example">


      <div class="layui-form-item">
        <label class="layui-form-label">安检公司</label>
        <div class="layui-input-block" id="record_company">
        </div>
      </div>
      <div>
        <div class="layui-form-item">
          <label class="layui-form-label">线路</label>
          <div class="layui-input-block" id="record_line">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <label class="layui-form-label">时间范围</label>
        <div class="layui-input-block">
          <input type="radio" name="date_type" value="0" title="周" checked="">
          <input type="radio" name="date_type" value="1" title="月">
          <input type="radio" name="date_type" value="2" title="季度">
          <input type="radio" name="date_type" value="3" title="半年">
          <input type="radio" name="date_type" value="4" title="年">
        </div>

      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">考勤状态</label>
        <div class="layui-input-block">
          <input type="checkbox" name="like2[正常打卡]" title="正常打卡" lay-skin="primary" checked="" class="work">
          <input type="checkbox" name="like2[迟到]" title="迟到" lay-skin="primary" checked="" class="work">
          <input type="checkbox" name="like2[早退]" title="早退" lay-skin="primary" checked="" class="work">
          <input type="checkbox" name="like2[漏打卡]" title="漏打卡" lay-skin="primary" checked="" class="work">
          <input type="checkbox" name="like2[未打卡]" title="未打卡" lay-skin="primary" checked="" class="work">

          <button type="submit" class="layui-btn" lay-submit="" lay-filter="search"
            style="float:right;margin-right: 50px;">查看结果</button>
        </div>

      </div>

      <div style="padding: 20px;">
        <div id="container1" style="height:400px;"></div>

      </div>
    </form>


  </div>


  <!-- <link rel="stylesheet" href="../../src/css/layui.css"> -->
  <script src="../../src/layui.js" charset="utf-8"></script>
  <script src="....//src/setter.js?v=0513"></script>
  <script src="../../pages/js/jquery.min.js"></script>
  <script src="../../pages/js/echarts.min.js"></script>
  <script src="../../pages/js/theme/westeros.js"></script>
  <script src="../../pages/js/theme/macarons.js"></script>
  <script src="../../pages/js/theme/purple-passion.js"></script>
  <script src="../../pages/js/theme/dark.js"></script>
  <script>
    layui.use(['table', 'element', 'form', 'laydate', 'layer'], function () {
      var form = layui.form;
      var $ = layui.jquery;
      var layer = layui.layer;
      //存储关系
      var company_line = [];

      $.ajax({
        url: '../json/line.json',
        dataType: 'json',
        async: true,
        type: 'get',
        success: function (result) {
          console.log(result);

          var data = result.data;
          company_line = data;
          var company = [];
          var line = [];
          for (var i = 0; i < data.length; i++) {
            company.push(data[i].name);

            for (var j = 0; j < data[i].line.length; j++) {
              if(line.indexOf(data[i].line[j])<0){
                line.push(data[i].line[j]);
              }
              
            }
          }
          loadCompany(company);
          loadLine(line);


        },
        error: function (data) {
          console.log(data);
        }
      });

      //加载公司
      function loadCompany(company) {
        var _html = '';
        //全选
        _html += '<input type="checkbox" name="like0[company]" title="全选" checked="" lay-filter="all_company" id="all_company">';
        for (var i = 0; i < company.length; i++) {
          console.log(company[i].length);
          _html += '<input type="checkbox" name="like[' + company[i] + ']" title="' + company[i];
          _html += '" checked="" class="company" lay-filter="filter_company" >';
        }
        $('#record_company').html(_html);
        form.render();
      }
      //加载线体
      function loadLine(line) {
        var _html = '';

        //全选
        _html += '<input type="checkbox" name="like10[line]" title="全选" lay-skin="primary" checked="" lay-filter="all_line" class="select_line" id="all_line">';
        for (var i = 0; i < line.length; i++) {
          _html += '<input type="checkbox" name="like1[' + line[i] + ']" title="' + line[i];
          _html += '" lay-skin="primary" checked="" class="line"lay-filter="filter_line" > ';
        }
        $('#record_line').html(_html);
        form.render();
      }


      //监听公司全选
      form.on('checkbox(all_company)', function (data) {
        //全选
        if (data.elem.checked) {
          $('.company').prop('checked', true);

          //线体全选
          $('.select_line').prop("disabled", false);
          $('.select_line').prop("checked", true);
          $('.line').prop("disabled", false);
          $('.line').prop("checked", true);

          form.render();
        } else {
          //全不选
          $('.company').prop("checked", false);
          //禁用所有线体
          $('.line').prop("disabled", true);
          //线体禁用
          $('.select_line').prop("disabled", true);
          $('.select_line').prop("checked", false);
          $('.line').prop("disabled", true);
          $('.line').prop("checked", false);
          form.render();
        }
      });

      //全选线体
      function selectAllLine() {
        //获取所有线体
        $("input:checkbox[class='line']").each(function (i) {

          if ($(this).attr('disabled') == undefined) {
            $(this).prop("checked", true);
          }
          else {
            $(this).prop("checked", false);
          }
        });
      }
      //监听线体全选
      form.on('checkbox(all_line)', function (data) {
        //全选
        if (data.elem.checked) {
          selectAllLine();
          form.render();
        } else {
          //全不选
          $('.line').prop("checked", false);
          form.render();
        }
      });

      //监听公司单选
      form.on('checkbox(filter_company)', function (data) {

        if (company_line.length == 0) {
          return false;
        }

        var name = $(this).attr('title');
        //获取所有选择的公司
        var selected_company = [];
        $("input:checkbox[class='company']:checked").each(function (i) {
          selected_company.push($(this).attr('title'));
        });
        console.log('==== 当前选择的公司 ====');
        console.log(selected_company);

        var used_line = [];
        //获取可用线体
        for (var i = 0; i < company_line.length; i++) {
          if (selected_company.indexOf(company_line[i].name) > -1) {
            for (var j = 0; j < company_line[i].line.length; j++) {
              used_line.push(company_line[i].line[j]);
            }
          }
        }

        console.log('==== 可用线体 ====');
        console.log(used_line);

        //获取所有线体
        $("input:checkbox[class='line']").each(function (i) {
          var disabled = $(this).attr('disabled');
          console.log(disabled);
          var title = $(this).attr('title');
          if (used_line.indexOf(title) > -1) {//包含当前线体
            $(this).prop("disabled", false);
            $(this).prop('checked', true);

          } else {
            $(this).prop('checked', false);
            $(this).prop("disabled", true);

          }
        });


        if (data.elem.checked) {
          $('#all_line').prop('disabled', false);
          //判断是否是全选
          if (selected_company.length == company_line.length) {
            $('#all_company').prop('checked', true);
            $('#all_line').prop('checked', true);
            //线体全选按钮启用

          }
        } else {
          //两个全选按钮
          $('#all_company').prop('checked', false);
          $('#all_line').prop('checked', false);

        }
        form.render();
      });


      //监听提交
      form.on('submit(search)', function (data) {
        //选择了哪些公司
        var selected_company = [];
        $("input:checkbox[class='company']:checked").each(function (i) {
          selected_company.push($(this).attr('title'));
        });

        //选择了哪些线体
        var selected_line = [];
        $("input:checkbox[class='line']:checked").each(function (i) {
          selected_line.push($(this).attr('title'));
        });

        //考勤状态
        var selected_work = [];
        $("input:checkbox[class='work']:checked").each(function (i) {
          selected_work.push($(this).attr('title'));
        });

        if (selected_company.length == 0) {
          layer.msg('请选择安检公司', {
            offset: 't',
            anim: 6
          });
          return false;
        }
        if (selected_line.length == 0) {
          layer.msg('请选择线路', {
            offset: 't',
            anim: 6
          });
          return false;
        }
        if (selected_work.length == 0) {
          layer.msg('请选择考勤状态', {
            offset: 't',
            anim: 6
          });
          return false;
        }
        //考勤类型
        var type = $("input[name='date_type']:checked").val();




        return false;
      });
      loadChart();


      function getChart() {
        $.ajax({
          url: '../json/console.json',
          dataType: 'json',
          async: true,
          type: 'get',
          success: function (result) {
            console.log(result);

          },
          error: function (data) {
            console.log(data);
          }
        });

      }

      //加载表格
      function loadChart() {
        var dom1 = document.getElementById("container1");
        var myChart1 = echarts.init(dom1, "dark");


        option1 = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            data: ['正常打卡', '迟到', '早退', '漏打卡', '未打卡']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value'
          },
          yAxis: {
            type: 'category',
            data: ['中安保', '中军军弘', '京诚京安', '恒安卫士', '鑫安儆卫', '国都金盾', '央务恒远', '都杰']
          },
          series: [
            {
              name: '正常打卡',
              type: 'bar',
              stack: '总量',
              label: {
                show: true,
                position: 'insideRight'
              },
              data: [120, 153, 134, 80, 95, 130, 60, 40]
            },
            {
              name: '迟到',
              type: 'bar',
              stack: '总量',
              label: {
                show: true,
                position: 'insideRight'
              },
              data: [13, 4, 20, 16, 13, 11, 22, 5]
            },
            {
              name: '早退',
              type: 'bar',
              stack: '总量',
              label: {
                show: true,
                position: 'insideRight'
              },
              data: [3, 5, 10, 6, 4, 14, 4, 6]
            },
            {
              name: '漏打卡',
              type: 'bar',
              stack: '总量',
              label: {
                show: true,
                position: 'insideRight'
              },
              data: [1, 2, 5, 1, 4, 8, 5, 6]
            },
            {
              name: '未打卡',
              type: 'bar',
              stack: '总量',
              label: {
                show: true,
                position: 'insideRight'
              },
              data: [4, 3, 10, 0, 1, 14, 16, 20]
            }
          ]
        };
        if (option1 && typeof option1 === "object") {
          myChart1.setOption(option1, true);
        }
      }


    });




  </script>

</body>

</html>